
/*
* 编辑赛区
*EditGameZone.js.js*/

import React, { PropTypes, PureComponent } from 'react';
import { autobind } from 'core-decorators';
import { Button, Modal, Form, Input,DatePicker,message  } from 'antd';
import { connect } from 'react-redux';
import DepartmentList from './DepartmentList';

import style from './editGameZone.less';
const FormItem = Form.Item;

const EditGameZoneForm = Form.create()(
	(props) => {
		const { 
			visible, 
			onCancel, 
			onCreate, 
			form,
			departmentData,
			dispatch,
			zoneName,
			departmentCode,
			departmentId
		} = props;
		const { getFieldDecorator } = form;
		console.log('ssssss1',props)
		function handleInput(e){
			dispatch({
				type:'privateGame/setState',
				payload:{
					divisionName:e.target.value
				}
			})
		}


		return (
			visible ?
				<Modal
					className={`${style.EditGameZone} add-EditGameZone`}
					visible={visible}
					title="编辑赛区"
					okText="提交"
					cancelText="取消"
					onCancel={onCancel}
					onOk={onCreate}
				>
				<Form layout="vertical">
					{/*<FormItem
						label="请设置赛区名称:"
				  >*/}
				  <FormItem
						label="请设置赛区名称:"  className={style.editDepartment}
				  >
				  	{getFieldDecorator(
							'gameDivName',
							{
								rules: [{ required: true,whitespace: true, message: '请输入赛区名称' }],
              	initialValue: zoneName,
							},
						  )(
	            <Input onChange={handleInput}/>,
				    )}
	          
		      </FormItem>
		      <FormItem
						label="部门:" className={style.editDepartment}
				  >
				  {
				  	departmentData?<DepartmentList
	         		departmentData={departmentData}
	         		departmentCode={departmentCode}
	         		departmentId={departmentId}
	         	/>:null
				  }
		      </FormItem>
				</Form>
			</Modal> : null
		);
	},
);

const mapStateToProps = state => ({
	departmentData:state.privateGame.departmentData,
	divisionName:state.privateGame.divisionName,
	departmentIdList:state.privateGame.departmentIdList,
});
const mapDispatchToProps = {
	editDivision: query => ({
		type: 'privateGame/editDivision',
		payload: query || {},
	}),
	setState:query => ({
		type: 'privateGame/setState',
		payload: query || {},
	}),
};

@connect(mapStateToProps, mapDispatchToProps)
class EditGameZone extends PureComponent {
	static propTypes = {
		form: PropTypes.object.isRequired,
	}
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			modalHeight: 0,
		};
	}
	componentDidUpdate() {
		const screenHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
		const ele = document.querySelector('.add-EditGameZone .ant-modal-body');
		if (ele) {
			ele.style.height = `${screenHeight * 0.6}px`;
		}
	}
	showModal = () => {
		this.setState({ visible: true });
	}

	handleCancel = () => {
		this.setState({ visible: false });
	}
	componentWillMount() {
		const {departmentData,departmentList,setState,type} =this.props;
		if(departmentList && type=='编辑'){
			const a = [];
			departmentList.map((item)=>{
	    	const node=departmentData.find(iitem=>iitem.id===item.id)
	    	a.push(node.id)
	    })
	    setState({
	    	'departmentIdList':a
	    })
		}
	}
	
	handleCreate = () => {
		const form = this.form;
		const { 
			createDivision ,
			competitionId,
			editDivision,
			divisionName,
			departmentIdList,
			departmentList,
			id,
			zoneName,
		} = this.props;
		Array.from(new Set(departmentIdList))
		console.log('Received',this.props)
		form.validateFields((err, values) => {
			if (err) {
				return;
			}
			console.log('Received values of form:>>>', values);
			if(_.isEmpty(departmentIdList)){
				message.warning('请选择部门');
				this.setState({ visible: true });
			}else{
				editDivision({
					name:values.gameDivName,
					departmentIdList:departmentIdList,
					competitionId:competitionId,
					id:id
				})
					this.setState({ visible: false });
			}
			form.resetFields();
	});
}

	saveFormRef = (form) => {
		this.form = form;
	}

	render() {
		const {
			type,
			departmentData,
			divisionName,
			dispatch,
			id,
			departmentList,
			zoneName,
			competitionId,
		} = this.props;
		console.log('sssssss',this.props)
		const departmentCode = [];
		const departmentId = []
		departmentList.map((item)=>{
    	const node=departmentData.find(iitem=>iitem.id===item.id)
    	departmentCode.push(node.code)
    	departmentId.push(node.id)
    })
    console.log('departmentCode',departmentCode,departmentId)
		return (
			<div >
				<Button type="primary" onClick={this.showModal}>编辑赛区</Button>
				<EditGameZoneForm
					ref={this.saveFormRef}
					visible={this.state.visible}
					onCancel={this.handleCancel}
					onCreate={this.handleCreate}
					dispatch={dispatch}
					departmentCode={departmentCode}
					departmentId={departmentId}
					departmentData={departmentData}
					zoneName={zoneName}
					id={id}
				/>
			</div>
		);
	}
}
export default Form.create({
})(EditGameZone);